<template>
  <div class="register">
    <div class="top">
      <img src="../assets/logo@2x.png" alt="" width="100" />
      <div>Регистрация счетов предприятий</div>
    </div>
    <div class="form">
      <!-- 成员姓名 -->
      <div class="form-item">
        <div class="form-flex">
          <span class="star">*</span>
          <span>Имя члена（会员名）</span>
        </div>
        <input v-model="member_names" placeholder="Установить имя участника" :class="{err: member_names_err}" @blur="member_names_onBlur" />
      </div>
      <!-- 登机代码 -->
      <div class="form-item">
        <div class="form-flex">
          <span class="star">*</span>
          <span>Код посадки（密码）</span>
        </div>
        <input v-model="boarding_code" placeholder="Настройка пароля входа" :class="{err: boarding_code_err}" @blur="boarding_code_onBlur" />
      </div>
      <!-- 密码 -->
      <div class="form-item">
        <div class="form-flex">
          <span class="star">*</span>
          <span>Подтвердить пароль（确认密码）</span>
        </div>
        <input
          v-model="password"
          placeholder="Введите пароль для входа снова."
          :class="{err: password_err}"
          @blur="password_onBlur"
        />
      </div>
      <!-- 联系人姓名 -->
      <div class="form-item">
        <div class="form-flex">
          <span class="star">*</span>
          <span>Имя контактного лица（联系人姓名）</span>
        </div>
        <input
          v-model="contact_name"
          placeholder="Пожалуйста, введите настоящее имя."
          :class="{err: contact_name_err}"
          @blur="contact_name_onBlur"
        />
      </div>
      <!-- 公司名称 -->
      <div class="form-item">
        <div class="form-flex">
          <span class="star">*</span>
          <span>Название компании（公司名称）</span>
        </div>
        <input
          v-model="corporate_name"
          placeholder="Пожалуйста, введите название компании в лицензии."
          :class="{err: corporate_name_err}"
          @blur="corporate_name_onBlur"
        />
      </div>
      <!-- 手机号码 -->
      <div class="form-item">
        <div class="form-flex">
          <span class="star">*</span>
          <span>Номер мобильного телефона（手机号码）</span>
        </div>
        <div class="flex phone-box" :class="{err: phone_number_err}">
          <div class="phone-type">
            <span class="num">{{ currentPhoneType }}</span>
            <select v-model="currentAction">
              <option
                :value="item.text"
                v-for="(item, index) in actions"
                :key="index"
              >
                {{ item.text }}
              </option>
            </select>
          </div>
          <input
            class="phone-input"
            v-model="phone_number"
            type="number"
            placeholder="Установить имя участника"
            @blur="phone_number_onBlur"
          />
        </div>
      </div>

      <!-- <div class="form-item">
        <div class="form-flex">
          <span class="star">*</span>
          <span>Номер мобильного телефона</span>
        </div>
        <input v-model="code" placeholder="Установить имя участника" />
      </div> -->
      <!-- 提交按钮 -->
      <div id="btn" @click="onSubmit">Регистрация и регистрация</div>
    </div>
  </div>
</template>
<script>
import axios from "axios"
export default {
  data() {
    return {
      isPending: false, // 是否正在请求
      member_names: "", // 成员姓名
      member_names_err: false,
      boarding_code: "", // 登记代码
      boarding_code_err: false,
      password: "", // 确认密码
      password_err: false,
      contact_name: "", // 联系人姓名
      contact_name_err: false,
      corporate_name: "", // 公司名称
      corporate_name_err: false,
      phone_number: "", // 手机号码
      phone_number_err: false,
      // code: '' // 验证码
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "Kazakhstan", type: "+7"},
        { text: "Uzbekistan", type: "+998" },
        { text: "Kyrgyzstan", type: "+996" },
        { text: "Tajikistan", type: "+992" },
        { text: "Turkmenistan", type: "+993" },
        { text: "Russia", type: "+7" },
        { text: "China", type: "+86" },
      ],
      currentAction: "Kazakhstan",
    };
  },
  computed: {
    currentPhoneType() {
      let index = this.actions.findIndex((k) => k.text == this.currentAction);
      return this.actions[index].type;
    },
  },
  methods: {
    // 手机号码失焦校验
    phone_number_onBlur(){
      this.phone_number_err = !this.validatePhoneNumber(this.phone_number, this.currentAction)
    },
    // 成员姓名失焦校验
    member_names_onBlur(){
      this.member_names_err = !this.member_names
    },
    // 登机失焦校验
    boarding_code_onBlur(){
      this.boarding_code_err = !this.boarding_code
    },
      
    // 密码失焦校验
    password_onBlur(){
      this.password_err = !this.password
    },
    // 联系人姓名失焦校验
    contact_name_onBlur(){
      this.contact_name_err = !this.contact_name
    },
    // 公司名称失焦校验
    corporate_name_onBlur(){
      this.corporate_name_err = !this.corporate_name
    },
    validatePhoneNumber(phoneNumber, countryCode) {
      const patterns = {
        'Russia': /^\d{10}$/,
        'Kazakhstan': /^\d{10}$/,
        'Uzbekistan': /^\d{9}$/,
        'Kyrgyzstan': /^\d{9}$/,
        'Tajikistan': /^\d{9}$/,
        'Turkmenistan': /^\d{8}$/,
        'China': /^\d{11}$/
      }
      return patterns[countryCode].test(phoneNumber)
    },
    // 选择区号
    onSelect(action) {
      console.log(action);
    },
    onSubmit() {
      if(this.isPending) return
      let params = {
        member_names: this.member_names, // 成员姓名
        boarding_code: this.boarding_code, // 登记代码
        password: this.password, // 确认密码
        contact_name: this.contact_name, // 联系人姓名
        corporate_name: this.corporate_name, // 公司名称
        phone_number: this.phone_number, // 手机号码
        // code: this.code
      }
      this.phone_number_err = !this.validatePhoneNumber(params.phone_number, this.currentAction)
      this.member_names_err = !this.member_names
      this.boarding_code_err = !this.boarding_code
      this.password_err = !this.password
      this.contact_name_err = !this.contact_name
      this.corporate_name_err = !this.corporate_name

      if(this.phone_number_err || this.member_names_err || this.boarding_code_err || this.password_err || this.contact_name_err || this.corporate_name_err) return false
      
      // 注册
      this.isPending = true;
      axios.post('/api/v1/per/register', params).then(res => {
        const { success } = res && res.data || {};
        this.isPending = false
        if(success){
          this.$router.replace({
            path: '/res'
          })
        } else {
          this.$toast({
            message: "error"
          })
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
.register {
  width: 100vw;
  height: 100vh;
  background: url("../assets/bg@2x.png") no-repeat center center;
  background-size: cover;
}
.top {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 12px 20px;
  font-size: 14px;
  color: #000;
  img {
    margin-right: 10px;
  }
}
.form {
  font-size: 14px;
  text-align: left;
  padding: 15px;
  .form-item {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .star {
    position: relative;
    top: 1px;
    margin-right: 4px;
    color: #ff5b56;
  }
}
input {
  padding: 0 12px;
  width: calc(100% - 24px);
  height: 32px;
  border-radius: 6px;
  border: 1px solid #8d9fb3;
  outline: none;
}
#btn {
  color: #fff;
  margin-top: 24px;
  width: 100%;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background: linear-gradient(45deg, #2579bc 0%, #1ab77b 100%);
  border-radius: 6px;
}
input::placeholder,
textarea::placeholder {
  color: #8d9fb3;
}
.form-flex {
  margin-bottom: 8px;
}
.flex {
  display: flex;
}
.phone-type {
  position: relative;
  width: 140px;
  .num {
    position: absolute;
    right: 0;
    top: 6px;
    right: 16px;
    color: #000;
  }
}
.phone-input {
  flex: 1;
  border: 0;
  background: transparent;
}
select {
  width: 100%;
  border: none;
  background-color: transparent;
  padding: 0;
  outline: none !important;
  height: 100%;
}
.phone-box {
  width: calc(100% - 12px);
  height: 32px;
  border-radius: 6px;
  border: 1px solid #8d9fb3;
  padding-left: 12px;
}
.err{
  background: rgba(255, 49, 49, 0.2);
  border-color: #ff3131;
}
</style>
